<template>
  <div id="signsDetailsChart">
    <vue-datepicker-local v-model="emptyTime" clearable @clear="clear" :placeholder="'请选择时间范围'" />
    <lineEcharts v-if="listData.length" class="line" :name="type+'趋势图'" :items="listData"></lineEcharts>
    <loading v-if="isShow && listData.length== 0"></loading>
    <noSearch v-if="!isShow && listData.length == 0"></noSearch>
  </div>
</template>
<script>
  import lineEcharts from '@/components/echarts/lineEcharts'
  import loading from '@/components/loading/loading'
  import { standardDate } from "@/components/common/date"; //引入时间转换JS
  import { apiSignsStatusList } from '@/api/api'  //引入病历列表数据
  import VueDatepickerLocal from '@/components/datepicker/VueDatepickerLocal'
  import noSearch from '@/components/search/noSearch' //导入没有搜索结果组件
  export default {
    data() {
      return {
        listData: [],
        patientID: this.$store.getters.ID,
        dataTime: "0000-00-00",
        type: this.$route.query.signsIndex,
        emptyTime: [],
        startDate: "",
        endDate: "",
        isShow: true
      }
    },
    watch: {
      emptyTime: {
        handler(curVal, oldVal) {
          if (standardDate(curVal[0]) == 'NaN-NaN-NaN' || standardDate(curVal[1]) == 'NaN-NaN-NaN') {
            this.startDate = '';
            this.endDate = '';
            this.isShow = true;
            this.GetSignsStatusList();
          } else {
            this.isShow = true;
            this.startDate = standardDate(curVal[0]);
            this.endDate = standardDate(curVal[1]);
            this.GetSignsStatusList();
          }
          }
      }
    },
    created() {

      this.clear();
    },
    mounted() {
      this.GetSignsStatusList();
    },
    methods: {
      GetSignsStatusList() {
        apiSignsStatusList({
          patientID: this.patientID,
          dateTime: this.dataTime,
          type: this.type,
          sort: "asc",
          startDate: this.startDate,
          endDate: this.endDate
        })
          .then(res => {
            this.listData = [];
            if (JSON.parse(res).Status == -1) { this.isShow = false; }
            if (JSON.parse(res).Status == 1) {
             
              for (var item in JSON.parse(res).Data) {
                for (var i = 0; i < JSON.parse(res).Data[item].length; i++) {
                  this.listData.push({ date: this.filterDate(JSON.parse(res).Data[item][i].PER_Time), value: JSON.parse(res).Data[item][i].Values });
                }
              }
              this.isShow = true;
            }
          })
      },
      filterDate(time) {
        if (!time) {
          return '';
        }
        else {
          time = time.replace(/\//g, '-');
          time = time.replace(/T/g, ' ');
          return time.substring(5, 16);
        }
      },
      clear() {
        this.emptyTime = []
      }
    },

    components: {
      lineEcharts,
      loading,
      VueDatepickerLocal,
      noSearch
    }
  }
</script>
<style scoped>
  #signsDetailsChart {
    height: calc(100% - 10px);
  }

  .line {
    width: 80%;
    height: 100%;
    margin: 0 auto;
    min-width: 700px;
  }

  #signsDetailsChart .datepicker {
    position: absolute;
    top: 15px;
    right: 170px;
  }
  @media screen and (max-width: 1023px){
    #signsDetailsChart .datepicker {
      position: initial;
      top: 0;
      right: 0;
      margin-left: 15px;
    }
  }
</style>
